<template>
	<view>
		<view class="pri-header">
			<view class="login-header-context" v-if = "isLogin">
				<view class="left">
					<view @click="changeAvatar()">
						<image :src="user.userAvatar" mode=""></image>
					</view>
					<view class="pri-name">
						<p>{{user.username}}</p>
					</view>
				</view>
				
				<view class="setting" @click="toset()">
					<uni-icons type="gear-filled" size="20"></uni-icons>
				</view>
			</view>	
			<view class="Notlogin-header-context" v-else>
				<fui-button type="success" @click="Login()">点击登录</fui-button>
			</view>
		</view>
		
		<view class="pri-main" style="margin-top: 50rpx;">
			<view class="pri-main-item" @click="toMyServe(1)" >
				<view class="pri-main-item-left" >
					<view class="image-icon">
						<image src="../../static/icon/my-icon/my-order.png" mode=""></image>
					</view>
					<view class="image-icon-text">
						<text>我的订单</text>
					</view>
				</view>
				<view class = "pri-main-item-right">
					<text> > </text>
				</view>
			</view>
			<view class="pri-main-item" @click="toMyServe(2)">
				<view class="pri-main-item-left">
					<view class="image-icon">
						<image src="../../static/icon/my-icon/my-likes.png" mode=""></image>
					</view>
					<view class="image-icon-text">
						<text>我的收藏</text>
					</view>
				</view>
				<view class = "pri-main-item-right">
					<text> > </text>
				</view>
			</view>
			<view class="pri-main-item" @click="toMyServe(3)">
				<view class="pri-main-item-left">
					<view class="image-icon">
						<image src="../../static/icon/my-icon/my-msg.png" mode=""></image>
					</view>
					<view class="image-icon-text">
						<text>我的消息</text>
					</view>
				</view>
				<view class = "pri-main-item-right">
					<text> > </text>
				</view>
			</view>
			<view class="pri-main-item" @click="toMyServe(4)">
				<view class="pri-main-item-left">
					<view class="image-icon">
						<image src="../../static/icon/my-icon/my-gonglve.png" mode=""></image>
					</view>
					<view class="image-icon-text">
						<text>我的攻略</text>
					</view>
				</view>
				<view class = "pri-main-item-right">
					<text> > </text>
				</view>
			</view>
			<view class="pri-main-item" @click="toMyServe(5)">
				<view class="pri-main-item-left">
					<view class="image-icon">
						<image src="../../static/icon/my-icon/my-address.png" mode=""></image>
					</view>
					<view class="image-icon-text">
						<text>我的地址</text>
					</view>
				</view>
				<view class = "pri-main-item-right">
					<text> > </text>
				</view>
			</view>
			<view class="pri-main-item" @click="Logout()">
				<view class="pri-main-item-left">
					<view class="image-icon">
						<image src="../../static/icon/my-icon/my-logout.png" mode=""></image>
					</view>
					<view class="image-icon-text">
						<text>退出登录</text>
					</view>
				</view>
				<view class = "pri-main-item-right">
					<text> > </text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import fuiButton from "@/components/firstui/fui-button/fui-button.vue"
	import fuiList from "@/components/firstui/fui-list/fui-list.vue"
	import fuiListCell from "@/components/firstui/fui-list-cell/fui-list-cell.vue"
	export default {
		components:{
			fuiButton,
			fuiList,
			fuiListCell
		},
		data() {
			return {
				isLogin:false,
				user:{
					userAvatar:null,
					username:null,
					userId:null,
					sex:null
				}
			}
		},
		onReady(){
			if(this.isLogin){
				this.user = JSON.parse(uni.getStorageSync('user'))
				console.log(this.user)
			}
		},
		onLoad(){
			console.log("刷新")
			this.updateLogin()
		},
		methods: {
			changeAvatar(){
				var that=this
				uni.chooseImage({
					count: 1, //count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: 'http://localhost:7777/api/user/upload',
							filePath: tempFilePaths[0],
							name:'file',
							header:{
								token: uni.getStorageSync('token')!=null? uni.getStorageSync('token'):' '
							},
							formData: {
								type:'Avatar',
							},
							success: (res) => {
								const data = JSON.parse(res.data)
								console.log("返回的结果：",data)
								if(data.code == '1'){
									
									uni.showToast({
										title: '图片更新成功'
									});
									
									that.user.userAvatar = data.data
									//更新数据
									uni.setStorageSync('user',JSON.stringify(that.user))
									window.location.reload()
								}
							},
							fail(res){
								console.log(res)
								uni.showToast({
									title: '提交失败'
								});
							}
						})
					}
				});
				
			},
			
			updateLogin(){
				const token = uni.getStorageSync('token')
				if(token!=null){
					this.isLogin = true
				}else{
					this.isLogin = false
				}
			},
			
			toset(){
				uni.navigateTo({
					url:"/pages/set/set"
				})
			},
			Login(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			Logout(){
				this.isLogin=false
				uni.removeStorageSync('token')
				uni.removeStorageSync('user')
			},
			toMyServe(parm){
				if(parm==1){
					uni.navigateTo({
						url:"/pages/order-category/order-category"
					})
				}
				else if(parm==2){
					uni.navigateTo({
						url:"/pages/collection/collection"
					})
				}
				else if(parm==3){
					uni.navigateTo({
						url:"/pages/my-msg/my-msg"
					})
				}
				else if(parm==4){
					uni.navigateTo({
						url:"/pages/my-strategys/my-strategys"
					})
				}
				else if(parm==5){
					uni.navigateTo({
						url:"/pages/my_positon/my_positon"
					})
				}
			}
		}
	}
</script>

<style scoped>
	
.Notlogin-header-context {
	margin-top: 80rpx;
	width: 80%;
	margin-left: 80rpx;
}

.login-header-context {
	width: 100%;
	height: 300rpx;
	display: flex;
	justify-content: space-between;
	background: linear-gradient(to right,#dcfdf6,#fff9d5);
}
.left {
	display: flex;
	margin-top: 60rpx;
}
.login-header-context view image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-top: 30rpx;
}
.login-header-context view {
	margin-left: 30rpx;
}
.pri-name {
	width: 120rpx;
	height: 120rpx;
	margin-top: 30rpx;
}
.pri-name p{
	line-height: 120rpx;
	font-size: 35rpx;
}
.welcome{
	width: 80%;
	margin: 0 auto;
}
.setting {
	margin-right: 30rpx;
	margin-top: 30rpx;
}
.pri-main-item {
	margin-top: 15rpx;
	margin-left: 50rpx;
	width: 80%;
	height: 80rpx;
	border-bottom: #f1f1f1 solid 2rpx;
	display: flex;
	justify-content: space-between;
}
.pri-main-item-left {
	display: flex;
}
.pri-main-item-right {
	margin-top: 10rpx;
}
.pri-main-item-right text {
	color: gray;
}
.image-icon {
	margin-right: 30rpx;
	padding-top: 5rpx;
}
.image-icon image{
	width: 40rpx;
	height: 40rpx;
	margin-top: 10rpx;
}
.image-icon-text {
	margin: 10rpx;
}
.image-icon-text text {
	
	font-size: 30rpx;
	height: 50rpx;
	line-height: 50rpx;
}
</style>
